<template>
    <section>
        <el-card>
            <!-- 命令展示 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>命令</el-breadcrumb-item>
                <el-breadcrumb-item>管理命令</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="card">
                <el-table :data="tableData">
                    <el-table-column label="创建时间" width="180px"><template slot-scope="scope"><span>{{scope.row.created_at}}</span></template></el-table-column>
                    <el-table-column label="更新时间" width=“180px”><template slot-scope="scope"><span>{{scope.row.updated_at}}</span></template></el-table-column>
                    <el-table-column label="命令" width="150px"><template slot-scope="scope"><span>{{scope.row.code}}</span></template></el-table-column>
                    <el-table-column label="说明" width="250px"><template slot-scope="scope"><span>{{scope.row.desc}}</span></template></el-table-column>                    
                    <el-table-column label="操作" width="250px" fixed="right">
                        <template slot-scope="scope">                           
                            <el-popover title="字段详情" width="300" trigger="click">
                                <!-- <div>{{scope.row.parameters}}</div> -->
                                    <el-table :data="JSON.parse(scope.row.parameters)" size="mini">
                                        <el-table-column type="index" width="50"></el-table-column>
                                        <el-table-column label="字段" width="100"><template slot-scope="scope"><span>{{scope.row.name}}</span></template></el-table-column>
                                        <el-table-column label="字段描述" width="200"><template slot-scope="scope"><span>{{scope.row.desc}}</span></template></el-table-column>
                                    </el-table>
                                <el-button slot="reference" type="primary" size="mini">详情</el-button>
                            </el-popover>
                            <el-button type="primary" @click="handleEdit(scope.$index,scope.row)" size="mini">编辑</el-button>
                            <el-button type="danger" @click="deleteCode(scope.row.id)" size="mini">删除</el-button>
                        </template>                       
                    </el-table-column>
                </el-table>
                <el-pagination background 
                    @size-change="handleSizeChange" 
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[3,4,5]"
                    :page-size="pagesize"
                    layout="total,sizes,prev,pager,next,jumper" 
                    :total="total">
                </el-pagination>
            </div>         

            <!-- 编辑界面   -->
            <el-dialog :visible.sync="dialogFormVisable">
                <el-row>
                <el-form :model="editForm" ref="editForm" :inline=true >
                    <el-form-item label="命 令" width="250" prop="code"
                    :rules="{required:true,trigger:'blur',message:'请填写命令'}">
                        <el-input style="width:170px" v-model="editForm.code"></el-input>
                    </el-form-item>
                    <el-form-item label="描 述" width="250" style="margin-left:40px;padding-left:30px" prop="desc" 
                    :rules="{required:true,trigger:'blur',message:'请填写命令描述'}">
                        <el-input style="width:170px;" v-model="editForm.desc"></el-input>
                        <el-button type="primary" @click="addItem()" circle><i class="el-icon-plus"></i></el-button>
                    </el-form-item>
                    <el-col :span="12">
                    <el-form-item v-for="(name,index) in editForm.fields" :label="'字段'+index" width="200" :prop="'fields['+index+']'"
                    :rules="{required:true,trigger:'blur',message:'请填写字段'}" :key="index">
                        <el-input style="width:170px" v-model="editForm.fields[index]" ></el-input>
                        <el-button type="danger" circle @click="deleteNameItem(name)"><i class="el-icon-minus"></i></el-button>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item  v-for="(desc,index) in editForm.fieldDescs" :label="'描述'+index" width="200" :prop="'fieldDescs['+index+']'"
                    :rules="{required:true,trigger:'blur',message:'请填写字段描述'}" :key="index">
                        <el-input style="width:170px" v-model="editForm.fieldDescs[index]"></el-input>
                        <el-button type="danger" circle @click="deleteDescItem(desc)"><i class="el-icon-minus"></i></el-button>
                    </el-form-item>
                    </el-col>
                </el-form>
                </el-row>
                <el-row>            
                    <el-button type="danger" @click="dialogFormVisable=false">取消</el-button>
                    <el-button type="primary" @click="submitEditForm('editForm')">提交</el-button>
                </el-row>                    
            </el-dialog>
        </el-card>      
    </section>
</template>

<script>
export default {
    data(){
        return {
            tableData:[],
            //codeTable:'',
            currentPage:1,
            pagesize:10,
            dialogFormVisable:false,
            total:0,
            editForm:{
                id:'',
                code:'',
                desc:'',
                fields:[],
                fieldDescs:[],
                addNameDesc:[],
                subNameDesc:[],
            }
        }
    },
    methods:{
        // 删除命令
        deleteCode(id){
            this.axios.post("/api/command/destroy/"+id)
                .then(response=>{
                if(response.data.result_code="SUCCESS"){
                    this.$message({
                        message:'提交成功',
                        type:'success',
                    })
                    this.getCommand();
                    // this.$tableData
                }else{
                    this.$message.error('提交失败')
                }
            }).catch(error=>{
                this.$message.error('提交失败')
            })
        },
        // 表格显示条数改变
        handleSizeChange(size){
            this.pagesize=size;
            this.axios.post("/api/commands",{params:{limit:this.pagesize}}).then(response=>{
                this.tableData=response.data.data;
                this.total=response.data.total;
            })
        },
        // 表格当前页面跳转
        handleCurrentChange(currentPage){
            this.currentPage=currentPage;
            this.axios.post("/api/commands",{params:{page:this.currentPage}}).then(response=>{
                this.tableData=response.data.data;
                this.total=response.data.total;
            })
        },
        // 点击编辑按钮
        handleEdit(index,row){
            this.dialogFormVisable=true;
            var value = Object.assign({},row);
            var addNameDesc=JSON.parse(value.parameters);
            this.editForm.id=value.id;
            this.editForm.code=value.code;
            this.editForm.desc= value.desc;
            for(let i=0;i<addNameDesc.length;i++){
                this.editForm.fields[i]=addNameDesc[i].name;
                this.editForm.fieldDescs[i]=addNameDesc[i].desc;
            }
        },
        // 编辑页面点击添加字段
        addItem(){
            this.editForm.fields.push("");
            this.editForm.fieldDescs.push("");
        },
        // 编辑页面下点击删除字段(字段名)
        deleteNameItem(item){
            var index=this.editForm.fields.indexOf(item);
            if(index!=0){
                this.editForm.fields.splice(index,1);
            }          
        },
        // 编辑页面下点击删除字段(字段描述)
        deleteDescItem(item){
            var index = this.editForm.fieldDescs.indexOf(item);
            if(index!=0){
                this.editForm.fieldDescs.splice(index,1);
            }
        },
        // 提交编辑页面
        submitEditForm(editForm){     
            this.$refs[editForm].validate((valid)=>{
                if(valid){
                    for(let i=0;i<this.editForm.fieldDescs.length;i++){
                    this.editForm.subNameDesc.push({
                        name:this.editForm.fields[i],
                        desc:this.editForm.fieldDescs[i]
                    })
                }
                this.axios.post("/api/command/update/"+this.editForm.id,{
                    code:this.editForm.code,
                    desc:this.editForm.desc,
                    parameters:this.editForm.subNameDesc,                   
                    }).then(response=>{
                        alert("提交成功");
                        this.editForm.subNameDesc=[];
                        this.getCommand();
                }).catch(error=>{
                    alert(error);
                    this.editForm.subNameDesc=[];
                })           
                this.dialogFormVisable=false;
                }else if(this.editForm.fieldDescs.length != this.editForm.fields.length){
                    alert("请注意字段名称与字段描述相符");
                    return false;
                }else{
                    return false;
                }
            })
        },
        //获取数据
        getCommand() {
            this.axios.get("/api/commands",{
                params: { limit: this.pagesize, page: this.currentPage }
            }).then(response=>{
                this.tableData=response.data.data.data;
                this.total=response.data.data.total;
            }).catch(error=>{
                alert(error);
            })
        }
    },
    created(){
        this.getCommand();
    }
}
</script>

<style>
.card{
    height: 50vw;
}
</style>
